<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ol>
			<li>手机名  xxxx</li>
			<li>内存容量  xxxx</li>
			<li>key value</li>
			<li>key value</li>
			<li>key value</li>
		</ol>
	</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const view ={
		init(){
			this.getPhoneList();
		},
		
		render(data) {
			let htmlStr = '';
			for (let p in data){
				htmlStr += `<li>${p}  ->   ${data[p]}</li>`;
			}
			$('ol').html(htmlStr);
		},
		
		getPhoneList(){
			let url = 'https://www.easy-mock.com/mock/5b67edb475d70b78bbc6212e/xinyan/phoneList';
			let data = {};
			$.ajax({
				url,
				type:'get',
				data,
				success: (res) => {
					let id = res.data.list[0].id;
					let url = 'https://www.easy-mock.com/mock/5b67edb475d70b78bbc6212e/xinyan/getDetail';
					let data = {id,};
					$.ajax({
						type: 'get',
						url,
						data,
						success: (res) =>{
							this.render(res.data);
						},
						error:(err) =>{
							console.log(err)
							
						}
					});
				},
				error: (err) =>{
					alert(err)
				}
			});
		}
	}
	
	view.init();
</script>


<script type="text/javascript">
	const view ={
		init(){
			this.getPhoneList();
		},
		
		render(data) {
			let htmlStr = '';
			for (let p in data){
				htmlStr += `<li>${p}  ->   ${data[p]}</li>`;
			}
			$('ol').html(htmlStr);
		},
		
		getPhoneList(){
			let status = new Promise((resolve,reject){
				
			})
			let url = 'https://www.easy-mock.com/mock/5b67edb475d70b78bbc6212e/xinyan/phoneList';
			let data = {};
			$.ajax({
				url,
				type:'get',
				data,
				success: (res) => {
					resolve(res)
				},
				
				error: (err) =>{
					reject(err)
				}
			});
			
			return status;
		},
		
		// async + promise 把异步变同步
		async getDetail(){
			// 等待数据回来再进行操作
			let status = await this.getPhoneList;
			// 获取id
			let id = status.data.list[0].id;
			let url = 'https://www.easy-mock.com/mock/5b67edb475d70b78bbc6212e/xinyan/getDetail';
			let data = {id,};
			$.ajax({
				type: 'get',
				url,
				data,
				success: (res) => {
					this.render(res.data);		
			},
			error: (err) => {
				console.log(err);	
			}
			})
			
		}
				
			
	
	view.init();
</script>